<template>
	<view class="container">
		<view class="header">
			<text class="title">测量数据详情</text>
			<view class="summary-card">
				<view class="summary-item">
					<text class="summary-label">水深(m)</text>
					<text class="summary-value">{{foundItem.wD}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">系数</text>
					<text class="summary-value">{{foundItem.xishu}}</text>
				</view>
				<view class="summary-item">
					<text class="summary-label">流量(m³/s)</text>
					<text class="summary-value">{{foundItem.liusliangnub.toFixed(3)}}</text>
				</view>
			</view>
		</view>

		<view class="list-container">
			<view class="list-header">
				<text class="header-item" style="width: 25%;">序号</text>
				<text class="header-item" style="width: 25%;">坐标</text>
				<text class="header-item" style="width: 25%;">均匀度</text>
				<text class="header-item" style="width: 25%;">流速(m/s)</text>
			</view>

			<view class="list-item" v-for="(item, index) in foundItem.measuringArr" :key="item.id">
				<text class="item-text" style="width: 25%;">{{item.id}}</text>
				<text class="item-text" style="width: 25%;">{{item.cR}}</text>
				<text class="item-text" style="width: 25%;">{{item.junyundu}}</text>
				<text class="item-text" style="width: 25%;">{{item.aveTy}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findById
	} from '@/utils/findById.js';
	export default {
		data() {
			return {
				foundItem:{}
			}
		},
		onLoad(opthion) {
			let arr = this.vuex_flowHistory
			this.findItem(arr,opthion.id)
		},
		onShow() {

		},
		methods: {
			findItem(arr,id) {
				// 使用封装的方法
				this.foundItem = findById(arr, id);
				console.log('---------',this.foundItem);
				// 如果使用不同的ID字段名，例如'cid'
				// this.foundItem = findById(this.data.measuringArr, this.searchId, 'cid');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;

		.header {
			margin-bottom: 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 20rpx;
			}

			.summary-card {
				display: flex;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.summary-item {
					flex: 1;
					text-align: center;

					.summary-label {
						display: block;
						font-size: 30rpx;
						color: #666;
						margin-bottom: 10rpx;
					}

					.summary-value {
						display: block;
						font-size: 40rpx;
						font-weight: bold;
						color: #409eff;
					}
				}
			}
		}

		.list-container {
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.list-header {
				display: flex;
				background-color: #409eff;
				padding: 20rpx 0;

				.header-item {
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.list-item {
				display: flex;
				padding: 25rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.item-text {
					text-align: center;
					font-size: 35rpx;
					color: #000000;
				}

				&:nth-child(even) {
					background-color: #f9f9f9;
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #f5f7fa;
	}
</style>